<!-- CSS实现3D菜单效果 -->
<script setup>
import { onMounted, ref } from "vue";
onMounted(() => {});
const list = dataList;
</script>

<template>
  <div
    id="l1"
    class="l1 flex j-c a-c">
    <div class="ul">
      <div
        class="li"
        v-for="item in list"
        :style="{ '--i': item.id, '--clr': item.bg }"
        :key="item.id">
        <span class="span"> {{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.l1 {
  width: 100%;
  height: 100%;
  background: #666;
  .ul {
    position: relative;
    transform: skewY(-10deg);
    .li {
      position: relative;
      list-style: none;
      width: 100px;
      padding: 15px;
      background: #3e3f46;
      z-index: calc(1 * var(--i));
      transition: 0.5s;
      // text-align: center;
      .span {
        color: #fff;
        display: block;
      }
    }
    .li:hover {
      background: var(--clr);
      transform: translateX(-50px);
      cursor: pointer;
    }
    .li::before {
      content: "";
      position: absolute;
      top: 0;
      left: -40px;
      width: 40px;
      height: 100%;
      background: #3e3f46;
      filter: brightness(0.7);
      transform-origin: right;
      transform: skewY(45deg);
      transition: 0.5s;
    }
    .li:hover::before {
      background: var(--clr);
      filter: brightness(0.7);
    }
    .li::after {
      content: "";
      position: absolute;
      top: -40px;
      left: 0px;
      width: 100%;
      height: 40px;
      background: #3e3f46;
      filter: brightness(0.9);
      transform-origin: bottom;
      transform: skewX(45deg);
      transition: 0.5s;
    }
    .li:hover::after {
      background: var(--clr);
      filter: brightness(0.9);
    }
    .li:last-child::after {
      box-shadow: -120px 120px 20px rgba(0, 0, 0, 0.25);
    }
  }
}
</style>
